<template>
  <div>
    <el-badge style="line-height: 25px;margin-top: -5px;" :value='num>0? num : ""' :max="99">
      <el-popover
        placement="top-start"
        title="通知"
        width="300"
        trigger="click">
        <div class="popover-content" v-html="content" @click="checkNotification"></div>
        <i class="el-icon-bell" slot="reference"></i>
      </el-popover>
    </el-badge>

    <el-dialog :visible.sync="dialogTableVisible" title="通知">
      <ul>
        <li v-for="(item, index) in notificationList" :key="item.id" style="border: 2px solid #CCCCCC;border-radius: 12px;padding: 2px;margin-bottom: 3px;font-size: 20px">
          第{{index+1}}条: {{item.message}}
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import { getNotifications, readNotifications } from '@/api/notification'

export default {
  name: 'Notification',
  created() {
    this.getNotificationList()
  },
  data() {
    return {
      notificationList: [],
      dialogTableVisible: false,
      content: '<p style="font-size: 25px">xxx</p>',
      num: 0,
      ids: [],
    }
  },
  methods: {
    async getNotificationList() {
      await getNotifications().then((res) => {
        this.notificationList = res.data
        this.notificationList.forEach(item => {
          if (item.status === 'TRUE') {
            this.num += 1
            this.ids.push(item.id)
          }
        })
        const newList = this.notificationList.slice(0,3)
        this.content = '<ul>'
        newList.forEach((item, index, array) => {
            this.content += `<ul style="width: 200px;border: 2px solid #CCCCCC;border-radius: 12px;padding: 2px;margin-bottom: 3px;text-align: center">${item.message}</ul>`
        })
        this.content += '<ul/>'
        if (this.num > 3) {
          this.content += '<a @click="dialogVisible=true" style="font-weight: bold;margin: 5px">查看更多</a>'
        } else if (this.notificationList.length === 0){
          this.content += '<span style="font-weight: bold;font-size: 20px;text-align: center">暂无通知</span>'
        }
      })
    },
    checkNotification() {
      this.num = ''
      this.dialogTableVisible = !this.dialogTableVisible
      // console.log(this.ids)
      readNotifications(this.ids)
      this.ids = []
    }
  }

}
</script>

<style scoped>

</style>
